import classnames from 'classnames';
import React, { ReactNode, useContext } from 'react';
import { ConfigContext } from '../configProvider';
import './index.less';

interface ButtonProps {
  type?: 'default' | 'primary' | 'secondary' | 'warning' | 'danger';
  disabled?: boolean;
  icon?: ReactNode;
  text?: string;
  children?: ReactNode;
  className?: string;
  style?: object;
  onClick?: React.MouseEventHandler<HTMLDivElement>;
}

export default function Button(props: ButtonProps) {
  const { type, disabled, icon, text, children, className, style, onClick } =
    props;

  const { prefix } = useContext(ConfigContext);
  const btnPrefix = prefix + '-btn';
  const classes = classnames(
    btnPrefix,
    {
      [`${btnPrefix}-primary`]: type === 'primary',
      [`${btnPrefix}-secondary`]: type === 'secondary',
      [`${btnPrefix}-warning`]: type === 'warning',
      [`${btnPrefix}-danger`]: type === 'danger',
      [`${btnPrefix}-disabled`]: disabled,
    },
    className,
  );

  return (
    <div className={classes} style={style} onClick={onClick}>
      {icon}
      {text}
      {children}
    </div>
  );
}
